<template>
    <div class="image-box flex-center-col">

            <img :src="image" alt="头像" v-show="showImage" class="image" >


        <div v-text="name" style="margin-top: 30px;font-size: 30px;margin-bottom: 20px"></div>

        <div class="flex-center-col user-info-box">

<!--            文章、分类数量-->
            <div style="flex:1;" class="flex-center">
                <div style="width: 100px;">
                    <i class="el-icon-tickets"></i>
                    <strong>文章</strong>
                    <div style="margin-top: 15px;font-size: 25px;color: tomato">
                        {{artCount}}
                    </div>
                </div>
                <div style="width: 100px;">
                    <i class="el-icon-s-management"></i>
                    <strong>分类</strong>
                    <div style="margin-top: 15px;font-size: 25px;color: tomato">
                        {{tabCount}}
                    </div>
                </div>
            </div>

<!--            联系标签-->
            <div style="flex:1;">
                <span v-for="i in user.info.contact"
                      class="user-info-contact"
                      v-html="i.icon"
                      @click="showInfo(i.title,i.content,i.imageSrc)"

                >

                </span>
<!--                <el-popover-->
<!--                        placement="top-start"-->
<!--                        title="标题"-->
<!--                        :width="200"-->
<!--                        trigger="hover"-->
<!--                        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"-->
<!--                >-->
<!--                    <template #reference>-->
<!--                        <el-button>hover 激活</el-button>-->
<!--                    </template>-->
<!--                </el-popover>-->
            </div>
        </div>

    </div>
</template>

<script>
    import {computed, reactive} from "@vue/reactivity";
    import Study from "@/views/Study";
    import { ElMessage } from 'element-plus'
    export default {
        name: "HeadImage",
        components: {Study},
        props:{
          image:{
              required:true,
              type:String,

          },
           name:{
              type:String,
               default: "小美不太聪明"
           },
            artCount:{
                type:Number,
                default: 0
            },
            tabCount:{
              type:Number,
                default:0
            }
        },
        setup(props,context){

            let showImage=computed(()=>{
                return props.image!=null && props.image!==""
            })

            let user=reactive({
                info:{

                    contact:[
                        {
                            icon:"<svg style=\"width: 35px;height: 35px\" t=\"1651911130415\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4430\" width=\"200\" height=\"200\"><path d=\"M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m210.385455 641.396364c-7.447273 9.309091-26.996364-1.861818-41.89091-32.581819-3.723636 13.963636-13.032727 36.305455-34.443636 64.232728 35.374545 8.378182 44.683636 42.821818 33.512727 61.44-8.378182 13.032727-26.996364 24.203636-59.578181 24.203636-58.647273 0-83.781818-15.825455-95.883637-26.996364-1.861818-2.792727-5.585455-3.723636-10.24-3.723636-4.654545 0-7.447273 0.930909-10.24 3.723636-11.170909 11.170909-37.236364 26.996364-95.883636 26.996364-32.581818 0-52.130909-11.170909-59.578182-24.203636-12.101818-18.618182-1.861818-53.061818 33.512727-61.44-20.48-27.927273-29.789091-50.269091-34.443636-64.232728-13.963636 30.72-34.443636 42.821818-41.890909 32.581819-5.585455-8.378182-8.378182-26.065455-7.447273-38.167273 3.723636-46.545455 34.443636-85.643636 53.061818-106.123636-2.792727-5.585455-8.378182-40.029091 14.894546-63.301819v-1.861818c0-92.16 65.163636-158.254545 148.014545-158.254545 81.92 0 148.014545 66.094545 148.014546 158.254545v1.861818c23.272727 23.272727 17.687273 57.716364 14.894545 63.301819 17.687273 20.48 49.338182 59.578182 53.061818 106.123636 0.930909 12.101818-0.930909 29.789091-7.447272 38.167273z\" fill=\"#30A5DD\" p-id=\"4431\"></path></svg>\n",
                            content:"   305042026",
                            title:"QQ",
                            imageSrc: ""
                        },
                        {
                            icon: "<svg style=\"width: 35px;height: 35px\" t=\"1651911141509\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5286\" width=\"200\" height=\"200\"><path d=\"M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z\" fill=\"#28C445\" p-id=\"5287\"></path><path d=\"M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z\" fill=\"#28C445\" p-id=\"5288\"></path></svg>\n",
                            content: "ylb305042026",
                            title:"VX",
                            imageSrc:  require("/src/assets/vx.jpg")

                        },
                        {
                            icon: "<svg style=\"width: 35px;height: 35px\" t=\"1651911357551\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"6867\" width=\"200\" height=\"200\"><path d=\"M873.472 0H150.528C67.584 0 0 67.584 0 150.528v722.944C0 956.416 67.584 1024 150.528 1024h722.944c82.944 0 150.528-67.584 150.528-150.528V150.528C1024 67.584 956.416 0 873.472 0z m-61.952 656.896c0 41.472-33.792 74.752-74.752 74.752H287.232c-41.472 0-74.752-33.28-74.752-74.752V367.104c0-41.472 33.28-74.752 74.752-74.752h449.024c41.472 0 74.752 33.28 74.752 74.752v289.792z\" fill=\"#4873ED\" p-id=\"6868\"></path><path d=\"M712.192 427.008L512 556.032 311.808 427.008c-9.216-6.144-21.504-3.072-27.648 6.144-6.144 9.216-3.072 21.504 6.144 27.648l210.944 135.68c3.072 2.048 7.168 3.072 10.752 3.072 3.584 0 7.68-1.024 10.752-3.072L733.696 460.8a20.48 20.48 0 0 0 6.144-27.648 20.48 20.48 0 0 0-27.648-6.144z\" fill=\"#4873ED\" p-id=\"6869\"></path></svg>\n",
                            content: "email:305042026@qq.com",
                            title:"Email",
                            imageSrc:""
                        }
                    ]
                }
            })


            return{
                showImage,
                user,
            }
        },
        methods:{
            showInfo(title,content,src) {
                let html
                if(src===""){
                    html=content
                }else{
                    html="<div>"+content+"</div>" +
                        "<div style='width: 280px;height: 200px' class='flex-center'>" +
                            "<img style='width: 180px;height: 180px'   src=  '"+src+" '>" +
                        "</div>"
                }
                this.$notify({
                    title: title,
                    message:html,
                    position: 'top-right',
                    dangerouslyUseHTMLString:true,
                    offset:100,
                    customClass:"my-message",
                    duration:1000*5
                });
            },
        }
    }
</script>

<style scoped lang="less">

    @Image-Width:100px;
    .image-box{
        width: 100%;
        height: 200px;
        margin: 0 0 50px 0;
        padding: 0;
        min-height: 720px;


        .image{
            overflow: hidden;
            width: @Image-Width;
            height: @Image-Width;
            border-radius:@Image-Width;
            object-fit: cover;

            box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
            transition: all 1s;
            /*box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;*/

        }

        .user-info-box{
            width:100%;
            height: 200px;
            font-size: 16px;

        }

        .user-info-contact{

            width: 35px;
            height: 35px;
            margin-left: 10px;
            cursor: pointer;

        }

    }

    .image-box:hover{
        background-image: linear-gradient(125deg, #2c3e50,#05668D, #028090, #00A896, #02C39A,#0ef57e,#06eecd);
        box-shadow: 1px 0 50px 10px #42b983;
        background-size: 400%;
        animation: bgTransiform 6s infinite alternate;
        color: black;
    }
    @keyframes bgTransiform {
        0%{
            background-position:  0% 50%;
        }
        50%{
            background-position:  100% 50%;
        }
        100%{
            background-position:  0% 50%;
        }
    }
    .image:hover{
        cursor: pointer;
        /*transform: rotate(45deg)*/
        animation: imageStart 2s;
    }


    @keyframes imageStart {
        25%{
            transform: rotate(45deg)
        }

        75%{
            transform: rotate(-45deg)
        }
    }


</style>